<template>
	<view class="container">
				
			<view class="example">
				<!-- 基础用法，不包含校验规则  渠道下游预付款加款申请-->
					
				<uni-forms  ref="valiForm" :rules="rules" :modelValue="valiFormData">
					
					<uni-forms-item label="打款单位名称" required name="unit" >
						<!-- <uni-easyinput v-model="valiFormData.unit" placeholder="请输入" /> -->
						<el-autocomplete
						  popper-class="my-autocomplete"
						  v-model="valiFormData.unit"
						  :fetch-suggestions="querySearch"
						  placeholder="请输入内容"
						  @select="handleSelect"   style="width: 100%;">
						  <i
						    class="el-icon-edit el-input__icon"
						    slot="suffix"
						    @click="handleIconClick">
						  </i>
						  <template slot-scope="{ item }">
						    <div class="account">{{ item.value }}</div>
						    <span class="agentName">{{ item.text }}</span>
						  </template>
						</el-autocomplete>
					</uni-forms-item>
					
					<uni-forms-item label="代理商编号" required name="director" >
							<uni-easyinput v-model="valiFormData.director" placeholder="请输入" />
					</uni-forms-item>
					
					<uni-forms-item label="合同编号" required name="encoded" >
						<uni-easyinput v-model="valiFormData.encoded" placeholder="请输入"/>
					</uni-forms-item>
					<uni-forms-item label="商务负责人" required name="principal" >
						<uni-easyinput v-model="valiFormData.principal"  placeholder="填写佳诺公司商务"/>
					</uni-forms-item>
					<uni-forms-item label="加款金额" required name="money">
						<uni-easyinput v-model="valiFormData.money"  placeholder="请输入" @blur="chackNum()" type="number"/>
					</uni-forms-item>
					<uni-forms-item label="收款方式" required name="accountTitle" >
						<uni-data-select v-model="valiFormData.accountTitle"
					      :localdata="means"
					     placeholder="请选择" />
					</uni-forms-item>
					<!-- 查询出来 -->
					
					<uni-forms-item label="支付日期" required name="paymentDate" >
						<uni-datetime-picker type="datetime" return-type="timestamp" v-model="valiFormData.paymentDate"/>
					</uni-forms-item>
					
					<uni-forms-item label="发票类型" required name="invoice" >
						<uni-data-select v-model="valiFormData.invoice"
					      :localdata="range"
					      placeholder="请选择" />
					</uni-forms-item>
					<!-- 上传文件组件 -->
					<uni-forms-item label="付款凭证">
						<cl-upload v-model="list"
							action="http://47.110.49.47:9080/system/image/upLoad"
						    useBeforeDelete 
						    useBeforeUpload
						    @beforeDelete="beforeDelete"
						    @beforeUpload="beforeUpload"></cl-upload>
					</uni-forms-item>
					
					<!-- <view class="">
						<uni-forms-item style="margin-bottom: unset;margin-left: 10px;">附件:</uni-forms-item>
						<cl-upload v-model="list" 
							action="http://47.110.49.47:9080/system/image/upLoad"
						    useBeforeDelete 
						    useBeforeUpload
						    @beforeDelete="beforeDelete"
						    @beforeUpload="beforeUpload"></cl-upload>
					</view> -->
				</uni-forms>
				
				<div class="radio" style="color: darkcyan">
				    审批流程
				  </div>
					
				  <view class="" v-for="(item, index) in items" :key="index+1">
				  	<view class="cu-timeline">
				  	    <view class="cu-time">审批人</view>
				  	    <view class="cu-item text-blue">  
				  	    <view class="flex">
				  	    	<view class="flex margin-right-sm padding-sm bg-gray radius" v-for="(itemData,indexData) in item.approverUserDtos" style="align-items: center;">
				  	    			<view class="cu-avatar lg" :style="{ backgroundImage: `url(${itemData.assPortrait})` }"></view>  
				  	    			<view class="text-grey margin-left-sm">{{ itemData.assessorName }}  </view>
				  	    	</view>
				  	    </view>
				  	    </view>  
				  	</view>
				  </view>  
				  
				  <view class="" v-for="(item, index) in copys" :key="index">
				  	<view class="cu-timeline">
				  	    <view class="cu-time">抄送人</view>
				  	    <view class="cu-item text-blue">  
				  	    <view class="flex">
				  	    	<view class="flex margin-right-sm padding-sm bg-gray radius" style="align-items: center;">
				  	    			<view class="cu-avatar lg" :style="{ backgroundImage: `url(${item.copyPortrait})` }"></view>  
				  	    			<view class="text-grey margin-left-sm">{{ item.username }}  </view>
				  	    	</view>
				  	    </view>
				  	    </view>  
				  	</view>
				  </view>
				
				<button type="primary" @click="submit('valiForm')">提交</button>
			</view>
	</view>
</template>
<script>
	import request from '../../../common/request';
	import common from 'common/common.js';
import { Icon } from 'element-ui';
	export default {
		data() {
			return {
				restaurants: [],
				list:[],
				iamgeBaseUrl:"https://hx.scjnxx.com/",
				items: [
						 {
							  approverUserDtos:[
							  {assPortrait:"https://wework.qpic.cn/wwpic3az/631527_RqIujUPQTY2iSWP_1702402832/0",assessorName:"毛周锐"}]
						 },
						  {
							  approverUserDtos:[
							  {assPortrait:"https://wework.qpic.cn/wwpic/198136_MoYax0xZQ3KuA3G_1692579794/0",assessorName:"孙恒"},
							  {assPortrait:"https://hx.scjnxx.com/大虎.jpg",assessorName:"王大虎"}],//19
						  }  
					 ],  
				copys: [
						{
							copyPortrait:"https://wework.qpic.cn/wwpic3az/631527_RqIujUPQTY2iSWP_1702402832/0",
							username:"毛周锐",
						}
						],
						
				 value:"",
				range: [
				        { value: "专票", text: "专票" },
				        { value: "普票", text: "普票" },
				        { value: "0普", text: "0普" },
						{ value: "无票", text: "无票" },
				      ],
				
				 means:[],
				
				// 校验表单数据 
				valiFormData: {
					director: '',
					encoded: '',
					principal: '',
					unit:'',
					money: '',
					invoice: '',
					paymentDate:'',
					accountTitle:'',
				},
				  
				
				// 校验规则
				
				
				rules: {
					director: {
						rules: [{
							required: true,
							errorMessage: '请输入'
						}]
					},
					encoded: {
						rules: [{
							required: true,
							errorMessage: '合同编码不能为空'
						}]
					},
					unit: {
						rules: [{
							required: true,
							errorMessage: '活动单位不能为空'
						}]
					},
					principal: {
						rules: [{
							required: true,
							errorMessage: '商务负责人不能为空'
						}]
					},
					money: {
						rules: [{
							required: true,
							errorMessage: '金额不能为空'
						}]
					},
					invoice: {
						rules: [{
							required: true,
							errorMessage: '发票类型不能为空'
						}]
					},
					accountTitle: {
						rules: [{
							required: true,
							errorMessage: '入账方式不能为空'
						}]
					},
					paymentDate: {
						rules: [{
							required: true,
							errorMessage: '请输入'
						}]
					},
				},
					templateInfo : [],
					processDetail:{ 
						makeUser:"", //抄送人  1,2
						approver:[{
							approver_id:"", //审批人
							priority:"", //优先级
						}],
					
					}
			}
		},
		onShow() {
			this.loadAll();
			this.selectAccount()
		},
		
		
		
		methods: {
			querySearch(queryString, cb) {
			        var restaurants = this.restaurants;
			        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
			        // 调用 callback 返回建议列表的数据
			        cb(results);
			      },
			      createFilter(queryString) {
			        return (restaurant) => {
			          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
			        };
			      },
			      loadAll() {
					 uni.request({
					  	url: "http://47.110.49.47:8068/api/xc/loadList",
						data:{
						},
						header:{
						},
						method: 'GET',
						success: res => {
							
							var code = res.data.code;
							var msg = res.data.errorMsg;
							console.log(res.data.data)
							if(code==200){
								this.restaurants = res.data.data;
									console.log(this.restaurants)
								for (let i = 0; i < this.restaurants.length; i++) {
								  // 获取当前对象的 accountTitle 属性  
								  const agentName = this.restaurants[i].agentName;  
								   const account = this.restaurants[i].agentCode;  
								  if (agentName) {  
									this.restaurants[i].value = agentName; 
								    this.restaurants[i].text = account;  
								    // 删除原来的 accountTitle 属性  
								    delete this.restaurants[i].agentName;  
								  }  
								}
								return this.restaurants;
							}else{
								uni.showToast({
									title:msg,
									icon:"error"
								})
							}
							
						},
						fail: function(e) {
							uni.showToast({
								title:"唉哟，程序错误了["+JSON.stringify(e)+"]",
								icon:"loading"
							})
						},
					  })
					 
			        
			      },
			      handleSelect(item) {
					  this.valiFormData.director = item.text;
			      },
			
			
			// 校验输入为正整数
			chackNum(e){
				const value = parseInt(this.valiFormData.money);
				var isInteger = Number.isInteger(value) && value > 0;
				if (!isInteger) {
					uni.showToast({
						title:"请输入正整数",
						icon: "success"
					})
					this.valiFormData.money = 0;
				}
			},
			/**
			    * 删除前钩子
			    * @param {Object} item 当前删除的图片或者视频信息
			    * @param {Number} index 当前删除的图片或视频索引
			    * @param {Function} next 调用此函数继续执行组件删除逻辑
			    * */ 
			   beforeDelete(item, index, next) {
								let imgName = item.split("/")[3];
			       uni.showModal({
			           title: '提示信息',
			           content: '确定要删除这个文件嘛？',
			           success: res => {
			               if (res.confirm) {
			                   // 模拟服务器接口
			                   uni.request({
			                   	url: common.base_url+'/system/image/delProductPicture',// 上服务器
			                   	// url: common.api_base_url+'/delFile/' + _this.filePathDoc, // 测试
			                   	data:{
			                   		path: imgName
			                   	},
			                   	method: 'POST',
			                   	success: res => {
													this.list.splice(index, 1);
			                   		// 文件不存在
													uni.showToast({
														title:res.data.message,
														icon:"success"
													})
			                   	},
			                   	fail: function(e) {
			                   		uni.showToast({
			                   			title:"唉哟，程序错误了["+JSON.stringify(e)+"]",
			                   			icon:"loading"
			                   		})
			                   	},
			                   });
			               }
			           }
			       });
			   },
			   /**
			    * 上传前钩子
			    * @param {Object} tempFile 当前上传文件信息
			    * @param {Function} next 调用此函数继续执行组件上传逻辑
			    * */
			   beforeUpload(tempFile, next) {
				   // var fileSize = tempFile.size;
				   // // 最大限制 250KB
				   // let maxSize = 250 * 1024;
				   // if(fileSize > maxSize){
					  //  uni.showToast({
						 //  title:"文件最大为250KB",
						 //  icon:"error"
					  //  })
					  //  return;
				   // }
					var res = next();
					res.then((result) => {
						console.log(result)
						if(result.code == 0){
							const data = this.iamgeBaseUrl + result.data;
							this.list.push(data);
						} else{
							uni.showToast({
								title:result.msg,
								icon:"error"
							})
						}
					}).catch((error) => {
					  console.error("发生错误：", error);
					});
			   },

			/*获取账户信息*/
			selectAccount(){
				request({
					url: common.base_url+"/system/account/list",
					data:{
					},
					header:{
					},
					method: 'GET',
					success: res => {
						this.means = res.data.rows;
						// 遍历数组  
						for (let i = 0; i < this.means.length; i++) {  
						  // 获取当前对象的 accountTitle 属性  
						  const accountTitle = this.means[i].accountTitle;  
						  if (accountTitle) {  
							this.means[i].value = accountTitle; 
						    this.means[i].text = accountTitle;  
						    // 删除原来的 accountTitle 属性  
						    delete this.means[i].accountTitle;  
						  }  
						}
						console.log(this.means)
					},
					fail: function(e) {
						uni.showToast({
							title:"唉哟，程序错误了["+JSON.stringify(e)+"]",
							icon:"loading"
						})
					},
				});
			},
						
			submit(ref) {
				
				this.$refs[ref].validate().then(res => {
					this.templateInfo=[
							{ dataAttribution: '代理商编号', dataContent: this.valiFormData.director, identification: 'ChannelAccount', priority: 0 },
							{ dataAttribution: '合同编号', dataContent: this.valiFormData.encoded, identification: 'text', priority: 1 },  
							{ dataAttribution: '商务负责人', dataContent: this.valiFormData.principal, identification: 'text', priority: 2 }, 
							 { dataAttribution: '打款单位名称', dataContent: this.valiFormData.unit, identification: 'text', priority: 3 },  
							 { dataAttribution: '加款金额', dataContent: this.valiFormData.money, identification: 'RaiseMoney', priority: 4 },  
							 { dataAttribution: '发票类型', dataContent: this.valiFormData.invoice, identification: 'text', priority: 5 },  
							 { dataAttribution: '收款方式', dataContent: this.valiFormData.accountTitle, identification: 'account', priority: 6 },  
							 { dataAttribution: '支付日期', dataContent: this.valiFormData.paymentDate, identification: 'text', priority: 7 },  
							 { dataAttribution: '付款凭证', dataContent: this.list.join(","), identification: 'image', priority: 8 },
						],
						
					this.processDetail = {
						makeUser:"20",
						approver:[
							{approver_id:"42",priority:"1"},
							{approver_id:"20",priority:"0"},
							{approver_id:"19",priority:"1"}
						]
					}

					request({
						url: common.base_url+"/system/form/pushApproval",
						data:{
							"name":"渠道下游预付款加款申请测试",
							"templateInfo":this.templateInfo,
							"processDetail":this.processDetail,
						},
					
						header:{
							
						},
						method: 'POST',
						success: res => {
							console.log(res)
							var code = res.data.code;
							var msg = res.data.msg;
							if(code==200){
								uni.showToast({
									title:"提交成功!",
									Icon:"success"
								})
								uni.navigateBack({
								    delta: 1,
								});
							}else{
								uni.showToast({
									title:msg,
									icon:"error"
								})
							}
							
						},
						fail: function(e) {
							uni.showToast({
								title:"唉哟，程序错误了["+JSON.stringify(e)+"]",
								icon:"loading"
							})
						},
					});
				}).catch(err => {
					console.log('err', err);
				})
				
			},
		},
		 
	}
</script>
<style lang="scss">

	.example {
		padding: 15px;
		background-color: #fff;
	}

	.segmented-control {
		margin-bottom: 15px;
	}

	.button-group {
		margin-top: 15px;
		display: flex;
		justify-content: space-around;
	}

	.form-item {
		display: flex;
		align-items: center;
	}

	.button {
		display: flex;
		align-items: center;
		height: 35px;
		margin-left: 10px;
	}
	
	.text {
	    font-size: 12px;
	    color: #666;
	    margin-top: 5px;
	  }
	
	  .uni-px-5 {
	    padding-left: 10px;
	    padding-right: 10px;
	  }
	
	  .uni-pb-5 {
	    padding-bottom: 10px;
	  }
	  
	  .my-autocomplete {
	    li {
	      line-height: normal;
	      padding: 7px;
	  
	      .account {
	        text-overflow: ellipsis;
	        overflow: hidden;
	      }
	      .agentName {
	        font-size: 12px;
	        color: #b4b4b4;
	      }
	  
	      .highlighted .addr {
	        color: #ddd;
	      }
	    }
	  }
</style>

